<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>项目跟踪-新增/修改</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f1">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">

    <style type="text/css">
        table{
            width: 570px;
            margin: 15px 15px 0;
            border: 0
        }

        table td{
            height: 25px;
            line-height: 25px;
        }
        table .col-title{
            width: 125px;
            text-align: center;
            background-color: #f5f5f5;
            border:1px solid #ddd
        }
        table .col-content{
            border:1px solid #ddd;
        }

        table .col-content input{
            width: 100%;
            outline:none;
            border: 0;
            padding: 0 5px
        }

        table .row-op{
            text-align: right;border:0
        }

        table .row-op input{
            border: 1px solid #ccc;
            border-radius: 4px;
            color: #999;
            height: 20px;
            line-height: 16px;
            margin: 5px 0;
            background-color: #fff;
            outline: none;
        }
        .user{
            display: inline-block;
            float: left;
            overflow: hidden;
            cursor: pointer;
        }
        .user.select{
            color: #fff;
            background-color: #045B9E;
        }
        
    </style>
</head>
<body>
<div class="layout" id="app">
    <table>
        <!-- <tr>
            <td class="col-title">一级项目：</td>
            <td class="col-content">
                <select style="border:0;outline:none">
                    <option v-for="item in level1ProjectList">{{item.PRO_NAME}}</option>
                </select>
            </td>
        </tr> -->
        <tr>
            <td class="col-title">负责人：</td>
            <td class="col-content">
                <div id="principal" style="padding-left:6px;">
                    <div class="user"
                        v-bind:class="{ select: principalSelected }"
                        v-on:click="selectUser(i,'principalSelectedIdx')">{{principalName}}
                    </div>
                    <input class="pull-left principal" :data-index="i" style="width:100px" :placeholder="principal.length==0?'只能输入一个人':''"
                        type="text" @keyup.delete="delPrincipal($event,item)"/>
                </div>
            </td>
        </tr>
        <tr>
            <td class="col-title">三级项目：</td>
            <td class="col-content">
                <input type="text" v-model="projectName" :value="projectName"/>
            </td>
        </tr>
    </table>
    <div class="south" style="height:50px;line-height:50px;text-align:center;">
        <input type="button" value="保存" class="btn oaBtn btn-sm" @click="save()"/>
    </div>
</div>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript">
    var api = frameElement.api, W = api.opener;
    var app = new Vue({
        el: "#app",
        data: {
            currentUser: getCurrentUser(),
            principalSelectedIdx:-1,
            level1Project:"",
            level1ProjectName:"",
            level2Project:"",
            projectName : "",
            principal:"",
            principalName:"",
            principalSelected:false,
            level3ProjectName:"",
            level1ProjectList:[],
            proSn : "",
        },
        methods: {
            selectUser: function (i, prop) {
                this[prop] = -1;
                this[prop] = i;
            },
            delPrincipal: function (event,item) {
                if (event.keyCode == 46 || event.keyCode == 8 && event.target.value == "") {
                    if (this.principalSelected) {
                        this.principal="";
                        this.principalName="";
                    } else {
                        this.principalSelected = true;
                    }
                }
            },
            initDate: function () {
                var that = this;
                that.level2Project = $.wyui.page.urlParams.projectId;
                that.proSn = $.wyui.page.urlParams.proSn;
                // $.wyui.postMethod(urlConfig.pm.projectTrack.getLevel1ProjectList, {}, function (data) {
                //     that.level1ProjectList = data.projectList;
                // });
            },
            save:function(){
                var that =this;
                $.wyui.postMethod(urlConfig.pm.projectTrack.saveProjectThree, {
                    createUserId : that.currentUser.id,
                    parentId : that.level2Project,
                    proName : that.projectName,
                    proPrincipal : that.principal,
                    proLevel : 3,
                    sortNo:0,
                    proSn:that.proSn
                }, function (data) {
                    if(data.result == 1){
                        parent.app.refresh();
                        api.close();
                    }else{
                        alert("保存失败");
                    }
                });
            }

        },
        mounted: function () {
            this.initDate();           
        }
    });
</script>
<script type="text/javascript">
$(function(){
    $(".principal").autoComplete({
        url: server.ip + urlConfig.system.user.getTop10ByNameUser,
        render: function (users, panel) {
            for (var i = 0; i < users.length; i++) {
                $("<li></li>").data("autoComplete",
                    users[i]).html("<a>" + users[i].name + "&nbsp;&nbsp;&nbsp;" +
                    "(" + "&nbsp;" + users[i].companyName + "-" + users[i].departName + "-" + users[i].roleName + "&nbsp;" + ") " + "</a>")
                    .appendTo(panel);
            }
        },
        selected: function (user) {
            app.principal = user.id;
            app.principalName = user.name;
            app.principalSelected = false;
            $(this).val("");
            return false;
        },
        height: 180,
        width: 300
    });

});
</script>
</body>
</html>